<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jquery-1.11.3.js"></script>

    <script>
        function distinct(){
            //将右边下拉框中value值存入数组
            var array = [];
            $('#sel2 > option').each(function (i,domEle){
                var val = $(domEle).val();
                array.push(val);//往数组最后添加一个元素
            });
            console.log(array);

            //遍历左边获取value值 跟上边数组比较 若相同 则删除
            $('#sel1 > option').each(function (i,domEle){
                var $option = $(domEle);
                var val = $option.val();
                if ($.inArray(val,array) >= 0){
                    $option.remove();
                }
            });
        }
    </script>
</head>
<body>

<table border="1">
    <tr>
        <td>
            <select id="sel1" style="width: 60px;height: 100px" size="8" multiple="multiple">
                <option value="1">选项1</option>
                <option value="2">选项2</option>
                <option value="3">选项3</option>
                <option value="4">选项4</option>
                <option value="5">选项5</option>
            </select>
        </td>
        <td>
            <button onclick="distinct()">消除重复</button>
        </td>
        <td>
            <select id="sel2" style="width: 60px;height: 100px" size="8" multiple="multiple">
                <option value="1">选项1</option>
                <option value="2">选项2</option>
                <option value="3">选项3</option>
            </select>
        </td>
    </tr>
</table>
</body>
</html>